<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="utf8">
	<title>数据看板</title>
	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">

    <style type="text/css">

    	body{

    		padding: 0;
    		margin:0;
    	}
    	
    	.layui-table-header .layui-table tr{

    		background:#1E9FFF;
    		color:#F0F0F0;

    	}

    	.mianBan-ul{
    		overflow:hidden;
    	}

    	.mianBan-ul .mianBan-item{

    		box-sizing: border-box;
    		width:150px;
    		height: 150px;
    		float:left;
    		background:#1E9FFF;
    		margin:10px;
    		border-radius: 10px;
    		color:#f0f0f0;
    		text-align: center;
    		padding:10px;
    	}

    	.mianBan-ul .mianBan-item .item-font{ 
    		font-size:15px;
    	 }
    	.mianBan-ul .mianBan-item .item-num{

    		font-size:40px;
    	}

    	.table_box{
    		width:100%;
    		overflow-x:auto;
    	}
    	.progres{
    		width: 100%;
    	}

    	.progress_box{
    		
    		position: relative;
    		width: 100%;
    		height:18px;
    		border-radius: 9px;
    		background-color:rgb(226,226,226);
    	}

    	.progress_box .progress_jindu{

    		position: absolute;
    		top:0;
    		left:0;
    		width: 0%;
    		height: 18px;
    		border-radius: 9px;
    		background-color: rgb(30,159,255);
    		text-align: right;
    		color:#fff;
    		padding-right: 10px;
    		box-sizing: border-box;
    		line-height: 18px;
    		font-size: 10px;
    	}

    	.sumStyle{

    		background-color:rgba(210,210,210,0.5);
    		font-weight: bold;
    	}

/*    	[data-content =合计],[data-content =合计] + td,[data-content =合计] + td + td,[data-content =合计] + td + td + td{

    		background-color:rgba(210,210,210,0.5);
    		font-weight: bold;
    	}*/




    </style>
</head>
<body>
	
    <div class="layui-fluid">

    	<div class="layui-row">
    		
    		<div class="layui-col-md12" id="kanban"></div>
    	</div>

    	<div class="layui-row">


    		<div class="layui-col-md12" id="progressBox">

    		</div>

    	</div>

    	<div class="layui-row">
    		
    		<div class="layui-col-md12">
    			<div class="table_box">
    				<div class="layui-tab layui-tab-card">
					  <ul class="layui-tab-title">
					    <li class="layui-this">数据概况</li>
					    <li>全转单数据</li>
					    <li>改标签数据</li>
					  </ul>
					  <div class="layui-tab-content" >
					    <div class="layui-tab-item layui-show" style="overflow: auto">
					    	<table id="table1"></table>
					    </div>
					    <div class="layui-tab-item" style="overflow: auto">
					    	<table id="table2"></table>
					    </div>
					    <div class="layui-tab-item" style="overflow: auto">
					    	<table id="table3"></table>
					    </div>
					  </div>
					</div>

    			</div>
    			

    		</div>

    	</div>

    	<div class="layui-row">
    		<div class="layui-col-md12">
    			<div class="table_box">
    				<div id="main" style="width: 1200px;height:400px;"></div>
    			</div>
    		</div>
    	</div>

	</div>


</body>
</html>

<script src="layui/layui.all.js"></script>
<script src="echarts/echarts.min.js"></script>

<script>

	   
	$(function(){

			var layer = layui.layer

			kb.progress()

			kb.mianBan(function(index){
				layer.close(index)
				
			})

			


	})


	
	var kb = {

		mianBan:function(fun){


				var layer = layui.layer
				var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2



				var self = this;

				$.post('mingxi.php',{type:40,limit:100,page:1},function(data,statuss){

						data=JSON.parse(data)

						// console.log(data)

						var count=data['data'];

						var qudao=[];

						var qudaoCount=[];

						var jinTiandate=(new Date()).format('yyyy-MM-dd');

						var jinMonth=(new Date()).format('yyyy-MM');

						var jinYear=(new Date()).format('yyyy');
						

						var dayData=[]

						for(var i=0;i<count.length;i++){  //渠道去重

							if(qudao.indexOf(count[i]['qudao'])==-1 && count[i]['date'] == jinTiandate){

									qudao.push(count[i]['qudao'])

							}

						}


						for(var i=0;i<qudao.length;i++){

							var sum=0

							var sumJinTian=0

							var sumMonth=0

							var sumYear=0

							var sumAll=0

							for(var j=0;j<count.length;j++){

								//sumAll+=parseInt(count[j]['COUNT'])

								if(qudao[i]==count[j]['qudao']){

									sum+=parseInt(count[j]['count'])

									//console.log(count)

									if(count[j]['date']==jinTiandate){

										sumJinTian+=parseInt(count[j]['count'])

									}

									if(count[j]['date'] !== null){

										if(count[j]['date'].substring(0,7)==jinMonth){

											sumMonth+=parseInt(count[j]['count'])

										}

										if(count[j]['date'].substring(0,4)==jinYear){

											sumYear+=parseInt(count[j]['count'])
										}


									}

									



								}

							}

							// console.log('全部'+qudao[i]+':'+sum) //全部

							// console.log('今天'+qudao[i]+':'+sumJinTian) //今天读

							// console.log('当月'+qudao[i]+':'+sumMonth) //当月

							// console.log('当年'+qudao[i]+':'+sumYear) //当年

							dayData.push({'qdao':qudao[i],'all':sum,'jinTian':sumJinTian,'sumMonth':sumMonth,'sumYear':sumYear})


						}

						

						self.shuJuKanBan('kanban',dayData)

						self.createTable(data.data)

						self.echarts(data)

						self.upProgress()

						fun(index)

						$.post('mingxi.php',{type:44},function(data,statuss){

							// console.log(JSON.parse(data).data)

							var da = JSON.parse(data).data

							self.createTableZhuanDan(da)


						})

						$.post('mingxi.php',{type:45},function(data,statuss){

							var da = JSON.parse(data).data

							self.createTableGaiBiaoQian(da)


						})



						


				})
		},
		shuJuKanBan:function(id,data){

					// console.log(data.length)

					var li=''

					var sum=0;
					var sumJinTian=0;
					var sumYear=0;

					for(var i=0;i<data.length;i++){

						li+="<div class=\"mianBan-item\"><span class=\"item-font\">"+data[i].qdao+"</span><br><span class=\"item-num\"><span class=\"item-font\">今日</span>"+data[i].jinTian+"</span><br><span class=\"item-bijiao\">今年提交数"+data[i].sumYear+"</span><br><span class=\"item-bijiao\">当月总提交数"+data[i].sumMonth+"个</span></div>"

						sum+=data[i].sumMonth;

						sumJinTian+=data[i].jinTian;

						sumYear+=data[i].sumYear;

					}

					// console.log(sum)

					sumli="<div class=\"mianBan-item\"><span class=\"item-font\">总数</span><br><span class=\"item-num\"><span class=\"item-font\">今日</span>"+sumJinTian+"</span><br><span class=\"item-bijiao\">今年提交数"+sumYear+"</span><br><span class=\"item-bijiao\">当月总提交数"+sum+"个</span></div>"

					$('#'+id).html('<div class="mianBan-ul">'+sumli+li+'</div>')

		},

		round:function(number, precision) {
				
		    return Math.round(+number + 'e' + precision) / Math.pow(10, precision);
			   
		},
		//创建图表
		echarts:function(data){


				data=data['data']

				var riqi=[]; var countSum=[]

				for (var i=0;i<data.length;i++) {
					
					if(riqi.indexOf(data[i]['date'])=='-1'){

						riqi.push(data[i]['date'])
					}

				}


				for(var i=0;i<riqi.length;i++){

					var sum=0;

					for(var j=0;j<data.length;j++){

						if(riqi[i]==data[j]['date']){

							sum+=parseInt(data[j]['count'])

						}

					}

					countSum.push(sum)
				}


				// 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));

		        // 指定图表的配置项和数据
		        var option = {
		            title: {
		                text: '每日提交数据趋势'
		            },
		            tooltip: {},
		            legend: {
		                data:['销量']
		            },
		            xAxis: {
		                data: riqi
		            },
		            yAxis: {},
		            series: [{
		                name: '每日提交总数',
		                type: 'line',
		                data: countSum,
		                color: ['#37A2DA']
		                
		            }]
	       		 };

		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);


		},
		//创建表格
		createTable:function(data){

			var self =  this;

			var tablei=layui.table;

			tablei.render({

				elem:'#table1',
				// url:'mingxi.php',
				// method:'post',
				// where:{'type':40},
				data:data,
				width:1200,
				page:true,
				limit:10,
				limits:[10,20,30,40,50,60,70,80,90],
				cols:[[
					 {field: 'date', title: '日期',  sort: true, fixed: 'left'}
					,{field: 'qudao', title: '渠道'}
					,{field: 'count', title: '提交数量'}
					,{field: 'jinDu', title: '已拨打数量'}
					,{field: 'zhuanDan', title: '转单'}
					,{field: '', title: '转单率',templet:function(d){return self.round(d.zhuanDan/d.count * 100,2)+'%'}}
				]],
				
			})
		},
		//进度条
		progress:function(){

			var self = this;

			$.post('mingxi.php',{type:43},function(data,statuss){

				var pgs = JSON.parse(data).data

				if(pgs[0].incomplete == 0){


					if(self.isShowProgress){


						$('#progressBox').html('')

						$('#progressBox').html(`<div class="progress_title">
		    				任务提交到呼叫系统进度：
		    			</div>
		    			
		    			<div class="progress_box">
		    				<div class="progress_jindu" id="progress">100%</div>
		    			</div>`)


						$('#progress').css({width:'100%'})


						setTimeout(function(){

							$('#progressBox').html('')

						},1000)


					}


					self.isShowProgress = false

					return
				}


				self.isShowProgress = true


				var incomplete = pgs[0].incomplete

				var total =  pgs[0].total

				var complete = total - incomplete

				var pre = Math.round(complete / total * 100)

				var pre = pre +'%'


				$('#progressBox').html('')

				$('#progressBox').html(`<div class="progress_title">
    				任务提交到呼叫系统进度：
    			</div>
    			
    			<div class="progress_box">
    				<div class="progress_jindu" id="progress">${pre}</div>
    				
    			</div>`)


				$('#progress').css({width:pre}).html(pre)



				

				


			})
		},
		//更新进度条
		upProgress:function(){

			var self = this;

			setInterval(function(){

				self.progress()

			},1000)
		},
		isShowProgress:false,
		createTableZhuanDan:function(data){
			var self =  this;

			var tablei=layui.table;

			tablei.render({

				elem:'#table2',
				// url:'mingxi.php',
				// method:'post',
				// where:{'type':40},
				data:data,
				// width:600,
				page:true,
				limit:10,
				limits:[10,20,30,40,50,60,70,80,90],
				cols:[[
					 {field: 'riqi', title: '日期',  sort: true, fixed: 'left'}
					,{field: 'ChannelName', title: '渠道',templet:function(d){ return d.ChannelName === '合计'?'<span>'+d.ChannelName+'</span>':d.ChannelName},}
					,{field: 'COUNT', title: '转单数'}
				]],
				done: function(res, curr, count){

					
					self.sumSyle('#table2')
				}
			})
		},
		createTableGaiBiaoQian:function(data){

			var self =  this;

			var tablei=layui.table;

			tablei.render({

				elem:'#table3',
				// url:'mingxi.php',
				// method:'post',
				// where:{'type':40},
				data:data,
				// width:600,
				page:true,
				limit:10,
				limits:[10,20,30,40,50,60,70,80,90],
				cols:[[
					 {field: 'riqi', title: '日期',  sort: true, fixed: 'left'}
					,{field: 'images', title: '渠道',templet:function(d){ return d.images === '合计'?'<span>'+d.images+'</span>':d.images}}
					,{field: 'sum', title: '提交数'}
					,{field: 'count', title: '转单数'}
					,{field: 'count', title: '转单率',templet:function(d){return self.round(d.count/d.sum * 100,2)+'%'}}
				]],
				done: function(res, curr, count){

					self.sumSyle('#table3')
					
				}
				
			})
		},
		sumSyle:function(el){

			$("[data-content =合计]").parent().addClass('sumStyle')

		}

	}

	Date.prototype.format = function (fmt) {
				    
	    var o = {
	        "M+": this.getMonth() + 1, //月份
	        "d+": this.getDate(), //日
	        "h+": this.getHours(), //小时
	        "m+": this.getMinutes(), //分
	        "s+": this.getSeconds(), //秒
	        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
	        "S": this.getMilliseconds() //毫秒
	    };
	    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
	    for (var k in o)
	        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
	    return fmt;
	}




</script>